<template>
	<div ref="echart" class="ui-echarts-box" :class="className" :id="id" :style="{height: height, width: width}"></div>
</template>

<script>
export default {
	name: 'EchartsBox',
	props: {
		className: {
			type: String,
			default: ""
		},
		id: {
			type: String,
			default: ""
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '100%'
		},
		autoResize: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			chart: null
		}
	},
    mounted() {
        if(this.autoResize) {
            window.addEventListener('resize', () => {
                this.chart && this.chart.resize();
            });
        }
    },
	methods: {
		setOption(options) {
			options = options || {};
			if(!this.chart) {
				this.chart = this.$echarts.init(this.$refs.echart);
			}
			this.chart.setOption(options, true);
		}
	},
	beforeDestroy() {
    	if (!this.chart) {
    		return;
    	}
    	this.chart.dispose();
    	this.chart = null;
	}
}
</script>